{% extends 'base/base.html' %}

{% block title %}浏览景点{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/user.css' %}">
{% endblock %}

{% block sidebar %}
{# 同dashboard.html的sidebar #}
{% include 'user/sidebar.html' %}
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">浏览景点</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="搜索景点..." aria-label="Search">
            <button class="btn btn-outline-secondary" type="button">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
</div>

<div class="row">
    {% for spot in page_obj %}
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            {% if spot.cover_image %}
            <img src="{{ spot.cover_image.url }}" class="card-img-top" alt="{{ spot.name }}" style="height: 200px; object-fit: cover;">
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">{{ spot.name }}</h5>
                <p class="card-text text-muted">{{ spot.description|truncatechars:100 }}</p>
                <p class="card-text">
                    <small class="text-muted">
                        <i class="fas fa-map-marker-alt me-1"></i>{{ spot.location }}
                    </small>
                </p>
            </div>
            <div class="card-footer bg-transparent">
                <a href="{% url 'accounts:spot_detail' spot.id %}" class="btn btn-sm btn-primary">查看详情</a>
                <a href="{% url 'accounts:toggle_favorite' spot.id %}" class="btn btn-sm {% if spot in request.user.favorite_spots.all %}btn-danger{% else %}btn-outline-danger{% endif %} float-end">
                    <i class="fas fa-heart"></i>
                </a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info">暂无景点数据</div>
    </div>
    {% endfor %}
</div>

{% if page_obj.has_other_pages %}
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
        </li>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
        <li class="page-item {% if num == page_obj.number %}active{% endif %}">
            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
        </li>
        {% endfor %}
        
        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/user.js' %}"></script>
{% endblock %}